$(function(){
    // 1.1 获取裁剪区域的 DOM 元素
 let $image = $('#image')
 // 1.2 配置选项
 const options = {
   // 纵横比
   aspectRatio: 1,
   // 指定预览区域
   preview: '.img-preview'
 }

 // 1.3 创建裁剪区域
 $('#image').cropper(options)

 //头像上传三步
 //1.选择图片； 2.渲染图片  3；上传头像
 $('#chooseImageBtn').on('click',function(){
     $('#chooseImageInp').click()
 })

 //渲染图片 ：chaang 选择文件时候触发事件：在aclue值发发生改变就会触动
 $('#chooseImageInp').on('change',function(){
   let file = this.files[0]
   //非空判断
   if(file === undefined) {
       return layui.layer,msg('上传头像，不能为空!')
   }
   //根据文件对象，生成路径
   let url = URL.createObjectURL(file)
   console.log(url);
   $image.cropper('destroy')
     .attr('src',url)
     .cropper(options)
 })

 //3.头像上传
 $('#uploadBtn').on('click',function(){
     let dataURL = $image
     .cropper('getCroppedCanvas',{
         width:100,
         height:100
     })
     .toDataURL('image/png')
     console.log(dataURL);

     //ajax 发送请求
     axios({
         url:'/my/update/avatar',
         method:'post',
         //我们要自己拼接这种：a=1&b=2&c=3
         //注意：只编译 dataURL , 不要编译前面的属性和等号
         data: "avatar=" + encodeURIComponent(dataURL)
         
     }).then(res=>{
         //成功回调
       //   console.log(res)
       if(res.data.status !==0){
           return layui.layer.msg(res.data.message)
       }
       //成功：提示+刷新页面头像渲染
       layui.layer.msg('恭喜您，更改用户头像成功!')
       window.parent.getUserInfo()
     });
 })
})